<template>
  <div class="order">
    <!-- 搜索 -->
    <router-link to="/classify">
      <van-search
        shape="round"
        background="#ff690c"
        placeholder="开启你的美食之旅"
      />
    </router-link>
    <!-- 轮播图 -->
    <div class="slideshow">
      <slideshow></slideshow>
    </div>
    <!-- 导航 -->
    <div class="order_nav">
      <ul>
        <li>
          <router-link to="/classify?value1=1" class="bottom_ico">
            <div class="order_nav_img order_nav_img1"></div>
            <p>招牌主食</p></router-link
          >
        </li>
        <li>
          <router-link to="/classify?value1=2" class="bottom_ico">
            <div class="order_nav_img order_nav_img2"></div>
            <p>热门糕点</p></router-link
          >
        </li>
        <li>
          <router-link to="/classify?value1=3" class="bottom_ico">
            <div class="order_nav_img order_nav_img3"></div>
            <p>人气菜肴</p></router-link
          >
        </li>
      </ul>
    </div>
    <!-- 商品列表 -->
    <ProductList>
      <p class="order_list_title">推荐菜品</p>
    </ProductList>
  </div>
</template>

<script>
import Slideshow from "@/components/Slideshow.vue";
import ProductList from "@/components/ProductList.vue";
export default {
  name: "OrderView",
  components: {
    Slideshow,
    ProductList,
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

.order {
  .order_search {
    height: 8vw;
    padding: $p;
    margin-top: 3vw;
    margin-bottom: 3vw;
    input {
      width: 100%;
      height: 100%;
      padding-left: 3vw;
      border: 0.2667vw solid $bgc;
    }
  }
  .slideshow {
    // height: 30vw;
    width: 100%;
  }
  .order_nav {
    width: 100%;
    height: 20w;
    // border-bottom: 0.2667vw solid #ddd;
    padding: $p;
    margin-bottom: 5vw;
    ul {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 100%;
      li {
        height: 100%;
        a {
          width: 100%;
          height: 100%;
          display: block;
          .order_nav_img {
            margin-top: 1vw;
            height: 17.0667vw;
            width: 17.0667vw;
            background-color: #fff;
            background: url("@/assets/icon.jpg") no-repeat center;
            background-size: 80%;
          }
          .order_nav_img2 {
            background: url("@/assets/icon1.jpg") no-repeat center;
            background-size: 80%;
          }
          .order_nav_img3 {
            background: url("@/assets/icon2.jpg") no-repeat center;
            background-size: 80%;
          }
          p {
            text-align: center;
          }
        }
      }
    }
  }
  .order_list_title {
    margin: $p 2vw;
    padding: 2vw 0;
    border-bottom: 0.2667vw solid #ccc;
    color: $bgc;
    font-weight: 600;
    font-size: 5.3333vw;
    text-align: left;
    border: 0;
  }
}
</style>